<template>
	<view class="content base-page">
		<view class="yangsf-radius-20">
			<u-swiper :list="banners" radius="0" height="180"></u-swiper>
		</view>
		<view class="user_info yangsf-m-t-30">
			<view class="user_info_card">
				<view class="user_info_hasLogin">
					<view>您好,</view>
					<view v-if="!this.$store.state.isLogin" @click="toLoginPage()"
						style="color: #1491FF;margin-left: 10px;">请先登录</view>
					<view v-else style="margin-left: 10px; display: flex;">
						{{loginName}}
						<view class="yangsf-m-l-20" v-if="member.memberType == 1">
							<u-tag text="已实名" plain size="mini" type="warning"></u-tag>
						</view>
						<view class="yangsf-m-l-20" v-else>
							<u-tag text="未实名" plain size="mini" type="info"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content_main yangsf-m-t-30 yangsf-flex-col-center yangsf-ratio-w-100">
			<view
				class="content_main_line_2 yangsf-m-t-30 yangsf-flex yangsf-flex-justify-content-space-between yangsf-ratio-w-95">
				<view class="card_white yangsf-ratio-w-48 card_bg_1" @click="clickGrid('1')">
					<view class="yangsf-padding-20">
						<span class="content_main_line_2_text">极速借条</span>
					</view>
				</view>
				<view class="card_white yangsf-ratio-w-48 yangsf-h-90 card_bg_2" @click="clickGrid('2')">
					<view class="yangsf-padding-20">
						<span class="content_main_line_2_text">分期借条</span>
					</view>
				</view>
			</view>

			<view
				class="content_main_line_2 yangsf-m-t-30 yangsf-flex yangsf-flex-justify-content-space-between yangsf-ratio-w-95">
				<view class="card_white card_bg_3" style="width: 22%;" @click="clickGrid('3')">
					<view class="yangsf-padding-5 yangsf-flex-col-center">
						<view class="yangsf-flex-col-center ">
							<span style="margin-top: 5px; font-weight: bold; font-size: 26rpx;">在线客服</span>
						</view>
					</view>
				</view>
				<view class="card_white card_bg_4" style="width: 22%; height: 140rpx;" @click="clickGrid('4')">
					<view class="yangsf-padding-5 yangsf-flex-col-center">
						<view class="yangsf-flex-col-center">
							<span style="margin-top: 5px; font-weight: bold; font-size: 26rpx;">法律咨询</span>
						</view>
					</view>
				</view>
				<view class="card_white card_bg_5" style="width: 22%;" @click="clickGrid('5')">
					<view class="yangsf-padding-5 yangsf-flex-col-center">
						<view class="yangsf-flex-col-center">
							<span style="margin-top: 5px; font-weight: bold; font-size: 26rpx;">投诉建议</span>
						</view>
					</view>
				</view>

				<view class="card_white card_bg_6" style="width: 22%;" @click="clickGrid('6')">
					<view class="yangsf-padding-5 yangsf-flex-col-center">
						<view class="yangsf-flex-col-center">
							<span style="margin-top: 5px; font-weight: bold; font-size: 26rpx;">履约提醒</span>
						</view>
					</view>
				</view>
			</view>
		</view>




		<!-- 常见问题功能模块 -->
		<view class="yangsf-m-t-30 yangsf-flex-col-center yangsf-ratio-w-100">
			<view class="card_white yangsf-ratio-w-95 ">
				<view class="yangsf-padding-20">
					<view class="yangsf-flex yangsf-flex-justify-content-space-between">
						<view class="yangsf-flex yangsf-flex-align-items-center">
							<u-icon name="/static/tabBar/sou.png" size="16"></u-icon>
							<text class="yangsf-m-l-20" style="font-size: 32rpx; font-weight: bold;">常见问题</text>
						</view>
						<view class="yangsf-flex yangsf-flex-align-items-center" @click="showAllFAQ">
							<text style="color: #8F8C8C; font-size: 28rpx;">查看全部</text>
							<u-icon name="arrow-right" color="#8F8C8C" size="14"></u-icon>
						</view>
					</view>

					<view class="yangsf-m-t-20">
						<view class="faq-item" v-for="(item, index) in faqList" :key="index"
							@click="showFAQDetail(item)">
							<text>{{item.question}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="yangsf-m-t-30 yangsf-flex-col-center yangsf-ratio-w-100" style="font-size: 12px;">
			<!-- <view class="card_white yangsf-ratio-w-95 yangsf-flex yangsf-flex-justify-space-around"> -->
			<view class="card_white yangsf-ratio-w-95 yangsf-flex-row-center">
				<!-- <view class="yangsf-flex-row-center">
					
				</view> -->

				<view class="yangsf-flex-row-center yangsf-m-l-10 yangsf-m-t-20 yangsf-m-b-20">
					<u-icon name="/static/icon/index_kx.png" size="20"></u-icon>
					<text class="yangsf-m-l-10">可信凭证</text>
				</view>
				<view class="yangsf-flex-row-center yangsf-m-l-20">
					<u-icon name="/static/icon/index_db.png" size="20"></u-icon>
					<text class="yangsf-m-l-10">等保认证</text>
				</view>
				<view class="yangsf-flex-row-center yangsf-m-l-20">
					<u-icon name="/static/icon/index_ca.png" size="20"></u-icon>
					<text class="yangsf-m-l-10">CA认证</text>
				</view>
			</view>

		</view>

		<u-toast ref="uToast" />
		<u-modal :show="showPayPassword" @cancel="cancelSetPayPassword" @confirm="toPayPassword" showCancelButton="true"
			title="设置密码" :content='showType == 1?"检测到您还未设置登录密码，是否前往设置？":"检测到您还未设置支付密码，是否前往设置？"'></u-modal>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getIndex,
		getAuthUrl,
		wxMpLogin,
		toPage,
		checkMemberLogin
	} from '@/config/api.js'
	import {
		appId,
		callbackUrl
	} from '@/config/config.js'

	export default {
		data() {
			return {
				showPayPassword: false,
				showType: 1,
				member: {
					loginName: '',
					memberType: 0
				},
				loginName: this.$store.state.userInfo.realName ? this.$store.state.userInfo.realName : this.$store.state
					.userInfo.nickName,
				banners: ['/static/banner/1410.jpg', '/static/banner/0114.jpg'],
				// banners: ['/static/img/banner3.png'],

				// 常见问题数据
				faqList: [{
						question: "电子合同为何具有法律效力？",
						answer: "<p>根据《中华人民共和国电子签名法》，可靠的电子签名与手写签名或者盖章具有同等的法律效力。</p><p>我们的电子合同系统符合电子签名法的相关规定，确保合同的法律效力。</p>"
					},
					{
						question: "实名认证不成功怎么办？",
						answer: "<p>您在实名认证时可能遇到如下情况，请重新做人脸识别:</p><p>1)未检测到人脸，请您按照规范重新录制</p><p>2)第三方底图不存在</p><p>3)身份证二要素与公安照片比对未通过</p><p>如果您多次尝试均未成功，请与客服取得联系，如果系统识别出人脸不符合要求将停止该账户签署合同功能。</p>"
					},
					{
						question: "如果忘记交易密码怎么办？",
						answer: "<p>如果您忘记账号使用的交易密码，可联系客户找回。</p>"
					}
				],
				showFAQPopup: false,
				currentFAQ: {}
			}
		},
		onLoad(option) {
			console.log("进入首页  ==> ", option)
			//模拟请求后台API
			// this.index();
			if (this.$store.state.isLogin) {
				getUserInfo().then(res => {
					this.member = res.data
					this.$store.commit('setUserInfo', res.data);
					this.checkPassword(res.data)
				})
			}
		},

		// 每次页面显示时都会执行
		onShow() {
			console.log("页面显示")
			// 每次进入页面都获取用户信息和实名状态
			if (this.$store.state.isLogin) {
				getUserInfo().then(res => {
					this.member = res.data
					this.$store.commit('setUserInfo', res.data);
					console.log("更新用户信息成功", res.data)
					this.checkPassword(res.data)
				})
			}
		},
		methods: {
			index() {
				console.log("发起首页请求")
			},
			checkPassword(data) {
				this.showType = 1
				if (!data.password || data.password.length <= 0) {
					this.showPayPassword = true
				}
			},
			toLoginPage() {
				uni.$u.route('/pages/userCenter/userLogin');
			},
			toPayPassword() {
				if (this.showType == 1) {
					uni.$u.route('/pages/userCenter/setPassword');
				} else {
					uni.$u.route('/pages/userCenter/setPayPassword');
				}
			},
			cancelSetPayPassword() {
				this.showPayPassword = false
			},
			// 显示全部常见问题
			showAllFAQ() {
				uni.$u.route('/pages/index/faq');
			},
			// 显示问题详情
			showFAQDetail(faq) {
				// 将问题数据存储到全局状态或本地存储，以便在新页面中获取
				uni.setStorageSync('currentFAQ', JSON.stringify(faq));
				uni.$u.route('/pages/index/faq');
			},
			// 关闭问题详情弹窗 - 不再需要，但保留方法以避免引用错误
			closeFAQPopup() {
				this.showFAQPopup = false;
			},
			//点击 u-grid 功能格
			clickGrid(e) {
				if (!this.$store.state.isLogin) {
					uni.$u.route('/pages/userCenter/userLogin');
				} else {
					checkMemberLogin().then(res => {
						if (res.code == 200) {
							let data = res.data
							if (res.data.isLogin) {
								//1.极速 2.分期
								if (e == 1 || e == 2) {
									if (data.memberType && data.memberType == 1) {
										if (data.isSetPayPassword && data.isSetPayPassword == 1) {
											uni.$u.route('/pages/contract/setKind', {
												type: e
											});
										} else {
											this.showType = 2
											this.showPayPassword = true
										}
									} else {
										uni.$u.route('/pages/auth/auth');
									}
								} else if (e == 3 || e == 4) {
									window.location.href = "https://work.weixin.qq.com/kfid/kfcdf4a09cc59ad336f"
								} else if (e == 5) {
									uni.$u.route('/pages/index/complaint');
								} else if (e == 6) {
									uni.$u.route('/pages/index/eginList');
								} else {
									uni.$u.toast("功能开发中, 敬请期待")
								}
							}
						} else {
							uni.$u.route('/pages/userCenter/userLogin');
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.header {
		width: 100%;
		height: 350rpx;
		/* background: ; */
		background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
		/* background-image: linear-gradient(to left, #00c6fb 0%, #55aaff 100%); */

		border-radius: 0 0 10px 10px;

		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 36rpx;
	}

	.user_info {
		width: 100%;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user_info_card {
		width: 95%;
		height: 60px;
		background-color: #fff;

		border-radius: 20rpx;

		display: flex;
		/* justify-content: center; */
		align-items: center;
	}

	.user_info_hasLogin {
		display: flex;
		justify-content: center;
		align-items: center;

		margin-left: 20px;
		font-size: 36rpx;
		font-weight: bold;
	}


	.content_main_line_1_text {
		font-size: 36rpx;
		font-weight: bold;
	}

	.content_main_line_2_text {
		color: #111111;
		font-size: 32rpx;
		font-weight: bold;
	}

	.content_main_line_text {
		font-size: 28rpx;
		color: #8F8C8C;
	}

	/* 常见问题样式 */
	.faq-item {
		padding: 20rpx 10rpx;
		border-bottom: 1px solid #EEEEEE;
		font-size: 28rpx;
		color: #303133;
	}

	.faq-item:last-child {
		border-bottom: none;
	}

	.card_bg_1 {
		background-image: url("/static/img/card_bg_1.jpg");
		background-size: 100% 100%;
	}

	.card_bg_2 {
		background-image: url("/static/img/card_bg_2.jpg");
		background-size: 100% 100%;
	}

	.card_bg_3 {
		background-image: url("/static/img/card_bg_3.jpg");
		background-size: 100% 100%;
	}

	.card_bg_4 {
		background-image: url("/static/img/card_bg_4.jpg");
		background-size: 100% 100%;
	}

	.card_bg_5 {
		background-image: url("/static/img/card_bg_5.jpg");
		background-size: 100% 100%;
	}

	.card_bg_6 {
		background-image: url("/static/img/card_bg_6.jpg");
		background-size: 100% 100%;
	}
</style>